<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" class="wh">
    <el-breadcrumb-item :to="{ path: '/list' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item ,index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
    <el-dropdown style="float: right" @command="handleCommand">
      <span class="el-dropdown-link">
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="32" :src="circleUrl"></el-avatar>
          </div>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-menu" command="/list">首页</el-dropdown-item>
        <el-dropdown-item icon="el-icon-info">信息</el-dropdown-item>
        <el-dropdown-item icon="el-icon-s-promotion" command @click.native="loginout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-breadcrumb>
</template>

<script>
import { baseUrl} from '../config/env'
export default {
  name: "headerTop",
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"]
    };
  },
  methods: {
    handleCommand(command) {
      console.log(command);
    },
    loginout() {
      this.$http
        .post(
          baseUrl + "/admin/loginout",
          {},
          { emulateJSON: true, withcredentials: true, credentials: true }
        )
        .then(data => {
          console.log(data);
          if(data.body.err==1){
             this.$router.push("/");
             this.$message.success("成功退出");
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.wh {
  height: 60px;
  line-height: 60px;
  background: #eee;
  padding-left: 32px;
}
.el-avatar {
  margin-right: 23px;
  margin-top: 15px;
}
</style>
